<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例 - 响应式的导航栏</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/jfcss.css" rel="stylesheet">
    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.goup.min.js"></script>
    <script type="text/javascript" src="js/jframe.js"></script>
</head>
<body >
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#jframe-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">JFrame.cn</a>
            </div>
            <div class="collapse navbar-collapse" id="jframe-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Spring</a></li>
                    <li><a href="#">Spring boot</a></li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            Java <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">jmeter</a></li>
                            <li><a href="#">EJB</a></li>
                            <li><a href="#">Jasper Report</a></li>
                            <li class="divider"></li>
                            <li><a href="#">分离的链接</a></li>
                            <li class="divider"></li>
                            <li><a href="#">另一个分离的链接</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

<div class="" style="background-color: #e7e7e7;margin-top: -20px;margin-bottom: 20px ;font-size: 20px;">
    <div class="container">

        <h3><span class="glyphicon glyphicon-th-large" aria-hidden="true">&nbsp;</span>spring MVC教程
            <small>&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-user" aria-hidden="true">&nbsp;</span>
                <a href="#">xiaoTOT</a>
            </small></h3>

        <small class="col-md-9" style="font-size: 14px;color: gray">这是专辑的描述,这是专辑的描述这是专辑的描述这是专辑的描述这是专辑的描述这是专辑的描述这是专辑的描述这是专辑的描述这是专辑的描述这是专辑的描述这是专辑的描述</small>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-9 col-sm-12">
            <!--<div class="well well-sm">您好，我在小的 Well 中！</div>-->
            <div class="panel panel-default">
                <div class="panel-body">
                <!--<div class="well">-->

                    <hr>
                    <div class="media">
                        <!--<a class="pull-left hidden-xs" href="#">-->
                            <div class="pull-left hidden-xs jf-art-item-header">
                        <div class="jf-art-item-top-bar">
                            <span>2000</span><br>
                            <span>赞</span>
                        </div>
                        <div class="jf-art-item-glance-bar">
                            <span>9999+</span> <br>
                            <span>浏览</span>
                        </div>
                    </div>
                        <!--</a>-->
                        <div class="media-body ">
                            <a class="media-heading jf-art-item-title" href="#">nginx入门系列（四）：nginx的location配置</a>
                            <div class="jf-art-item-desc hidden-md hidden-sm hidden-xs " >
                                nginx的配置系统由一个主配置文件和其他一些辅助的配置文件构成。这些配置文件均是纯文本文件，全部位于nginx安装目录下的conf目录下。nginx配置中的注释使用“#”开头，自#到行尾都视为注释内容，nginx会忽略这些内容。nginx的配置系统由一个主配置文件和其他一些辅助的配置文件构成。这些配置文件均是纯文本文件，全部位于nginx安装目录下的conf目录下。nginx配置中的注释使用“#”开头，自#到行尾都视为注释内容，nginx会忽略这些内容。
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 右侧展示栏-->
        <div class="col-md-3 hidden-xs hidden-sm">
            <div class="panel panel-default">
                <div class="panel-body">
                    <p>
                        Bootstrap 导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML 中放置的位置定位的。通过一些帮助器类，您可以把它放置在页面的顶部或者底部，或者您可以让它成为随着页面一起滚动的静态导航栏。
                        如果您想要让导航栏固定在页面的顶部，请向 .navbar class 添加 class .navbar-fixed-top。下面的实例演示了这点：
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-9">
            <div style="text-align: center">
                <ul class="pagination">
                    <li><a href="#">&laquo;</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul><br>
            </div>
        </div>
    </div>
</div>

<div class="container" style="margin-top: 100px">
    <footer >
        <div style="text-align: center">
            Copyright © 2016 jframe.cn<br>
            蜀ICP备16009498号
        </div>

    </footer>
</div>


</body>
</html>
